<template>
	<view class="jobDetailPage">
		<view id="mescrollTopEle">
			<view class="bfRa  mL15 mR15 pB15 pL15 pT15 pR15 pB15">
				<view class="flex  alg-center jst-between">
					<view class="flex alg-center jobLeft">
						<view class="jobName  txt-ellipsis font18 bold u-3">{{info?.realName}}</view>
						<view class="jobOrgTag   font13 mL5" v-if="info?.label"> 常用工 </view>
					</view>
					<view class="flex alg-center">
						<view @click="phoneLink">
							<image class="imgW54" :src="resources.job.cirMessage" mode=""></image>
						</view>
						<view class="mL10" @click="chatJupm">
							<image class=" imgW54" :src="resources.job.cirPhone" mode=""></image>
						</view>
					</view>
				</view>
				<view class="font15 mT5" v-show="info?.expectPositionText">
					<text class="u-6">期望职位：</text>
					<text>{{info?.expectPositionText}}</text>
				</view>
				<view class="flex alg-center jst-between mT10">
					<view class="jobPos flex alg-center w70">
						<image class="imgW32" :src="resources.posIcon" mode=""></image>
						<text class="posTxt mL5 txt-ellipsis"
							style="width: calc(100% - 32rpx);">{{info?.homeAddress}}</text>
					</view>
					<view class="font13 u-6" v-if="isDistance">{{info?.distance}}</view>
				</view>
			</view>

			<view class="mL15 mR15 pT15 pB15">
				<view class="flex jst-between">
					<text class="font17">合适职位信息</text>
				</view>
			</view>

		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="topH">
			<view class="jobCard mL15 mR15" v-for="(item,i) in list" :key="item.id"
				@click="xf.onlineUtils.route(`/pages/common/jobDetail/index?id=${item.id}`)">
				<view class="flex  alg-center jst-between">
					<view class="flex alg-center w75">
						<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
						<u-tag v-if="item.izUrgent==1" text="急聘" bg-color="#fff" class="jpTag" :color="'#FF0000'"
							:border-color="'#FF0000'" />
						<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0" text="用工无忧"
							bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'" />
					</view>
					<view class="jobMoney txt-ellipsis  font20 u-red">{{item.salary}}<text
							class="jobUint font13">元</text></view>
				</view>
				<view class="flex alg-center flex-wrap">

					<view class="jobTime">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
					<view class="jobTime">{{item.salaryPaymentText}}</view>
					<view class="jobTime">招{{item.oddJobUseNum}}人</view>
				</view>
				<view class="flex alg-center jst-between mT10">
					<view class="jobPos flex" :class="isDistance?'w70':'w100'">
						<image class="posImg" :src="resources.posIcon" mode=""></image>
						<text class="posTxt mL5 txt-ellipsis"
							style="width: calc(100% - 42rpx);">{{item.hopeWorkAddress}}</text>
					</view>
					<view class="font13 u-6" v-show="isDistance">{{item.distance}}</view>
				</view>
				<view class="flex jst-between alg-center mT10">
					<block v-if="item.oddReleaseType==1">
						<view class="flex alg-center"
							@click.stop="xf.onlineUtils.route(`pages/common/personOrcompnayInfo/index?isPerson=${item.oddReleaseType}&id=${item.id}`)">
							<u-image :width="48" :height="48" :borderRadius="10" v-if="item.userprofile"
								class="companyImg" :src="xf.getImgUrl(item.userprofile)" mode=""></u-image>
							<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
							<text class="companyName">{{item.comOrUserName}}</text>
							<image v-if="item.comizAuthentication" class="rzImg" :src="resources.grrzLogo" mode="">
							</image>
						</view>
						<view class="bmBtn" @click.stop="sureOpt(item)">给Ta派工</view>

					</block>
					<block v-else>
						<view class="flex alg-center"
							@click.stop="xf.onlineUtils.route(`pages/common/personOrcompnayInfo/index?isPerson=${item.oddReleaseType}&lat=${item.latitude}&lon=${item.longitude}&id=${item.id}`)">
							<u-image :width="48" :height="48" :borderRadius="10" v-if="item.userprofile"
								class="companyImg" :src="xf.getImgUrl(item.userprofile)" mode=""></u-image>
							<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
							<text class="companyName">{{item.comOrUserName}}</text>
							<image class="rzImg" :src="resources.grrzLogo" mode=""></image>
						</view>
						<view class="bmBtn" @click.stop="sureOpt(item)">给Ta派工</view>

					</block>

				</view>

			</view>
		</mescroll-uni>

		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>
<script>
	import workerJob from "@/components/company/jobCard/index.vue"
	import jobItem from "@/components/company/jobItem/index.vue"
	import {
		nearJober,
		hsJob,
		workJober
	} from '@/api/companyInterface/job.js'
	import {
		getLocal
	} from "@/libs/map.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			jobItem
		},
		watch: {
			info() {
				if (this.flagSetH == true) {
					this.$nextTick(() => {
						this.getElementScollTop()
						this.flagSetH = false;
						console.log(this.flagSetH)
					})
				}
			},
		},
		data() {
			return {
				userId: null,
				info: null,
				tx: null,
				isDistance: false,
				latitude: '',
				longitude: '',
				topH: 0,
				list: [],
				flagSetH: true,
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
			};
		},
		async onLoad(e) {
			let that = this;
			this.userId = e.id;
			this.isDistance = e.distance == 'true' ? true : false;
			this.getDetail()
		
		},
		methods: {
			chatJupm(){
				let info={
					id: this.info.xfOddUserId,
					realName: this.info.realName,
					headImage: this.info.comOrUserProfile,
					online: false
				}
				this.chatStore.addFriend(info)
			},
			getElementScollTop() {
				const query = uni.createSelectorQuery()
				query.select('.lisBox').boundingClientRect((data) => {
						this.topH = Math.round(data.top)+'px'
						console.log(this.topH)
					}).exec()
			},
			callNumber() {
				let id = this.info.xfOddUserId;
				this.xf.callPhone({
					acquirerId: id,
					details: 10
				})
			},
			phoneLink() {
				let that = this;
				this.$refs.tipModal.open({
					content: "确认拨打电话吗？",
					btnText: "拨打",
					showCancel: true,
					success: function() {
						that.callNumber()
					}
				})
			},
			//派单
			sureOpt(v) {
				let that = this;
				this.$refs.tipModal.open({
					btnText: "给Ta派工",
					content: "确认派工给Ta吗？",
					showCancel: true,
					success: function() {
						workJober([{
							"xfOddGeneralId": that.info.xfOddUserId,
							"oddjobInfoId": v.id,
							"isGrab": "1"
						}]).then(res => {
							if (res.success == true) {
								uni.showToast({
									icon: 'none',
									title: "派单成功！",
									duration: 2000
								})

								setTimeout(() => {
									that.getPosLis()
								}, 2000)
							}
						})
					}
				})
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				let pageNo = page.num;
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();

				hsJob({
					latitude: lat,
					longitude: lon,
					pageSize: 10,
					pageNo: pageNo
				}).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})

			},

			async getDetail(id) {
				this.info=null;
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				nearJober({
					xfOddUserId: this.userId,
					latitude: lat,
					longitude: lon
				}).then(res => {
					this.info = res.result ? res.result[0] : null
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			margin-top: 16rpx;
		}

		.jobTag {
			height: 44rpx;
			line-height: 44rpx;
			margin-top: 16rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-right: 10rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>